<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <link href="/layui/css/layui.css" media="all" rel="stylesheet">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<div class="layui-row">
    <div class="layui-col-xs2">
        &nbsp;
    </div>
    <div class="layui-col-xs8">
        <div class="layui-fluid">
            <div class="layui-card">
                <div class="layui-form layui-card-header layuiadmin-card-header-auto" style="padding: 20px;">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">姓名：</label>
                            <div class="layui-input-inline">
                                <input autocomplete="off" class="layui-input" id="name" name="name" placeholder="请输入姓名"
                                       type="text">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">账号：</label>
                            <div class="layui-input-inline">
                                <input autocomplete="off" class="layui-input" id="username" name="username" placeholder="请输入账号"
                                       type="text">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">密码：</label>
                            <div class="layui-input-inline">
                                <input autocomplete="off" class="layui-input" id="pwd" name="pwd" placeholder="请输入密码"
                                       type="text">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layuiadmin-btn-list" id="addUser">新增账号</button>
                        </div>
                    </div>
                </div>

                <div class="layui-card-body">
                    <table class="layui-hide" id="test" lay-filter="demo"></table>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-xs2">

    </div>
</div>


<script charset="utf-8" src="/layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script id="barDemo" type="text/html">
    <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-mini" lay-event="del">删除</a>
</script>
<script>
    layui.use('table', function () {
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.jquery;

        $(function () {
            var t = table.render({
                elem: '#test'
                , url: '/list'
                , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , cols: [[
                    {field: 'name', width: 200, title: '姓名'}
                    , {field: 'username', width: 200, title: '账号'}
                    , {field: 'password', width: 200, title: '密码'}
                    , {fixed: 'right', width: 200, title: '操作', align: 'center', toolbar: '#barDemo'}
                ]]
            });

            //监听工具条
            table.on('tool(demo)', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    layer.msg('ID：' + data.id + ' 的查看操作');
                } else if (obj.event === 'del') {
                    layer.confirm('确定删除该账号吗？', function (index) {
                        $.ajax({
                            type: "post",
                            url: "/del",
                            data: {
                                username: data.username
                            },
                            success: function (res) {
                            }
                        });
                        t.reload();
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    layer.alert('编辑行：<br>' + JSON.stringify(data))
                }
            });


            $("#addUser").click(function () {

                if ($("#username").val().trim().length = 0) {
                    layer.alert("请输入账号！");
                }

                if ($("#pwd").val().trim().length = 0) {
                    layer.alert("请输入密码！");
                }

                var index = layer.load(1, {
                    shade: [0.5,'#fff'] //0.1透明度的白色背景
                });

                $.ajax({
                    type: "post",
                    url: "/add",
                    data: {
                        username: $("#username").val().trim(),
                        pwd: $("#pwd").val().trim(),
                        name: $("#name").val().trim()
                    },
                    success: function (res) {
                        layer.close(index)
                        if (res.code == 0) {
                            $("#username").val("");
                            $("#pwd").val("");
                            $("#name").val("");
                            layer.msg("添加成功！");
                            //执行重载
                            t.reload();
                        } else {
                            layer.alert(res.msg);
                        }

                    },
                    error: function () {
                        layer.msg("添加失败！");
                        layer.close(index)
                    }
                });
            })
        });


    });
</script>

</body>
</html>